<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绑定样式</title>
    <style>
      .basic {
        width: 400px;
        height: 100px;
        border: 1px solid black;
      }
      .happy {
        background: linear-gradient(red, pink);
      }
      .sad {
        border: 1px solid green;
        background-color: #4f4e4d;
      }
      .normal {
        background-color: skyblue;
      }

      .atguigu1 {
        background-color: teal;
      }
      .atguigu2 {
        font-size: 30px;
        text-shadow: 1px 2px 3px tomato;
      }
      .atguigu3 {
        border-radius: 8px;
      }
    </style>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--  
          绑定样式:
            1.class样式
                写法:class="xxx" xXx可以是字符串、对象、数组。
                字符串写法适用于:类名不确定，要动态获取。
                对象写法适用于: 要绑定多个样式,个数不确定，名字也不确定。
                数组写法适用于: 要绑定多个样式，个数确定，名字也确定，但不确定用不用
            2. style样式
                :style="{fontSize: xxx}"其中xxx是动态值。
                : style="[a,b]"其中a、b是样式对象。

      -->
    <div id="root">
      <!-- 绑定class样式 字符串写法   适用于 样式不确定需要动态指定 -->
      <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
      <br />
      <!-- 绑定class样式 数组写法   适用于 要绑定的样式个数不确定、名字也不确定 -->
      <div class="basic" :class="classArr">{{name}}</div>
      <br />
      <!-- 绑定class样式 对象写法   适用于 要绑定的样式个数确定、名字也确定 ，但要动态决定用不用 -->
      <div class="basic" :class="classObj">{{name}}</div>
      <br />

      <!-- 绑定style内联的样式 用的不多 -->
      <!-- 对象写法 -->
      <div class="basic" :style="styleObj">{{name}}</div>
      <br />
      <!-- 数组写法  -->
      <!-- <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> -->
      <div class="basic" :style="styleArr">{{name}}</div>
    </div>

    <script>
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "尚硅谷",
          mood: "normal",
          classArr: ["atguigu1", "atguigu2", "atguigu3"],
          classObj: {
            atguigu1: false,
            atguigu2: false,
          },
          styleObj: {
            fontSize: "40px",
            color: "red",
          },
          styleObj2: {
            backgroundColor: "orange",
          },
          styleArr: [
            {
              fontSize: "40px",
              color: "red",
            },
            {
              backgroundColor: "orange",
            },
          ],
        },
        methods: {
          changeMood() {
            const arr = ["happy", "sad", "normal"];
            const index = Math.floor(Math.random() * 3);
            this.mood = arr[index];
          },
        },
      });
    </script>
  </body>
</html>
